
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _extends2 = _interopRequireDefault(require('@babel/runtime/helpers/extends'));

const _babelHelperVueJsxMergeProps = _interopRequireDefault(require('@vue/babel-helper-vue-jsx-merge-props'));

const _utils = require('../utils');

const _functional = require('../utils/functional');

const _constant = require('../utils/constant');

const _router = require('../utils/router');

const _icon = _interopRequireDefault(require('../icon'));

const _loading = _interopRequireDefault(require('../loading'));

// Utils
// Components
const _createNamespace = (0, _utils.createNamespace)('button');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

function Button(h, props, slots, ctx) {
  let _ref;

  const { tag } = props;
  const { icon } = props;
  const { type } = props;
  const { color } = props;
  const { plain } = props;
  const { disabled } = props;
  const { loading } = props;
  const { hairline } = props;
  const { loadingText } = props;
  const style = {};

  if (color) {
    style.color = plain ? color : _constant.WHITE;

    if (!plain) {
      // Use background instead of backgroundColor to make linear-gradient work
      style.background = color;
    } // hide border when color is linear-gradient


    if (color.indexOf('gradient') !== -1) {
      style.border = 0;
    } else {
      style.borderColor = color;
    }
  }

  function onClick(event) {
    if (!loading && !disabled) {
      (0, _functional.emit)(ctx, 'click', event);
      (0, _router.functionalRoute)(ctx);
    }
  }

  function onTouchstart(event) {
    (0, _functional.emit)(ctx, 'touchstart', event);
  }

  const classes = [bem([type, props.size, {
    plain,
    loading,
    disabled,
    hairline,
    block: props.block,
    round: props.round,
    square: props.square,
  }]), (_ref = {}, _ref[_constant.BORDER_SURROUND] = hairline, _ref)];

  function Content() {
    const content = [];

    if (loading) {
      content.push(h(_loading.default, {
        class: bem('loading'),
        attrs: {
          size: props.loadingSize,
          type: props.loadingType,
          color: 'currentColor',
        },
      }));
    } else if (icon) {
      content.push(h(_icon.default, {
        attrs: {
          name: icon,
          classPrefix: props.iconPrefix,
        },
        class: bem('icon'),
      }));
    }

    let text;

    if (loading) {
      text = loadingText;
    } else {
      text = slots.default ? slots.default() : props.text;
    }

    if (text) {
      content.push(h('span', {
        class: bem('text'),
      }, [text]));
    }

    return content;
  }

  return h(tag, (0, _babelHelperVueJsxMergeProps.default)([{
    style,
    class: classes,
    attrs: {
      type: props.nativeType,
      disabled,
    },
    on: {
      click: onClick,
      touchstart: onTouchstart,
    },
  }, (0, _functional.inherit)(ctx)]), [Content()]);
}

Button.props = (0, _extends2.default)({}, _router.routeProps, {
  text: String,
  icon: String,
  color: String,
  block: Boolean,
  plain: Boolean,
  round: Boolean,
  square: Boolean,
  loading: Boolean,
  hairline: Boolean,
  disabled: Boolean,
  iconPrefix: String,
  nativeType: String,
  loadingText: String,
  loadingType: String,
  tag: {
    type: String,
    default: 'button',
  },
  type: {
    type: String,
    default: 'default',
  },
  size: {
    type: String,
    default: 'normal',
  },
  loadingSize: {
    type: String,
    default: '20px',
  },
});

const _default = createComponent(Button);

exports.default = _default;
